import {Component, Input, OnInit} from '@angular/core';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile';
import {OSM, XYZ} from 'ol/source'
import {UtilComponent} from '../../interface/util-component.interface';

@Component({
    selector: 'kylin-layer-swipe',
    templateUrl: './layer-swipe.component.html',
    styleUrls: ['./layer-swipe.component.less']
})
export class LayerSwipeComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    layers: any[];
    crtLayer: TileLayer;
    swipePercent = 50;
    selectedLayer: any;
    prListener: any;
    pcListener: any;

    constructor() {
        this.layers = [
            {
                name: '卫星图',
                layer: new TileLayer({
                    source: new XYZ({
                        url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
                    })
                })
            },
            {
                name: '地形图',
                layer: new TileLayer({
                    source: new XYZ({
                        url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
                    })
                })
            },
            {
                name: 'OpenStreetMap',
                layer: new TileLayer({
                    source: new OSM()
                })
            }
        ];
    }

    ngOnInit() {
        this.crtLayer = this.layers[0].layer;
        this.selectedLayer = this.crtLayer;
        this.turnOn();
    }

    turnOn() {
        setTimeout(() => {
            this.bindForLayer();
            this.bindForRange();
            this.map.addLayer(this.crtLayer);
        }, 0);
    }

    bindForRange() {
        const swipe = document.getElementById('map-utils-layer-swipe-range');
        swipe.addEventListener('input', () => {
            this.map.render();
        }, false);
    }

    bindForLayer() {
        this.prListener = this.crtLayer.on('precompose', (event) => {
            const ctx = event.context;
            const width = ctx.canvas.width * (this.swipePercent / 100);

            ctx.save();
            ctx.beginPath();
            ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
            ctx.clip();
        });

        this.pcListener = this.crtLayer.on('postcompose', function (event) {
            const ctx = event.context;
            ctx.restore();
        });
    }

    unbindFromLayer() {
        this.crtLayer.un('postcompose', this.pcListener);
        this.crtLayer.un('precompose', this.prListener);
    }

    cancel(options?: any): any {
        this.map.removeLayer(this.crtLayer);
    }

    resetLayer() {
        this.unbindFromLayer();
        this.map.getLayers().pop();
        this.swipePercent = 50;
        this.crtLayer = this.selectedLayer;
        this.turnOn();
    }
}
